import React, { Component } from "react";
import style from "./index.module.scss";
import {connect} from "react-redux"
import {Avatar,Image} from "antd";
const imgFallback = require("../../../common/imageDefault/imgloaderr.png").default;

class Bookinfo extends Component {

    constructor(props){
        
        super(props);
        this.state={
            userInfo:null,
            count:1 ,
            allChecked:false
        }
    }

    



    static defaultProps = {
        bookinfo: {
            uid: "1",
            uname: "老笔斋的猫",
            signature:"",
            img: require("../image/3.png").default,
            list: [
                {
                    cover: require("../image/4.png").default,
                    brief: "刚刚来过",
                    right: "√",
                    student: "学生认证",
                    name: "沉默大多数1",
                    describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                    former: "9成新",
                    expr: "快递包邮",
                    address: "广州 广东",
                    price: "￥16",
                    price2: "12",
                    checked: false
                },
                {
                    cover: require("../image/4.png").default,
                    brief: "刚刚来过",
                    right: "√",
                    student: "学生认证",
                    name: "奋斗多年",
                    describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                    former: "9成新",
                    expr: "快递包邮",
                    address: "广州 广东",
                    price: "￥16",
                    price2: "12",
                    checked: false
                }
            ],
        },
    }
    //购物车数量加减
    dist=(item)=>{
        this.props.dist(item)
    }
    add=(item)=>{
        this.props.add(item)
    }
    check=(e,item)=>{
        item.ischeck=e.target.checked
        console.log(item);
        this.props.check(item)
    }
    render() {
        let { bookinfo } = this.props
        console.log(bookinfo)
        let blist = bookinfo;
        let bItem = blist.map((bookinfo,index)=>{
            return (
                <li key={index} className={style["bookbody"]}>
                    <input type="checkbox" className={`checksingle-${index}`} checked={bookinfo.ischeck} onChange={(e) => this.check(e,bookinfo)}></input>
                    <Image className={style["bookcover"]} src={"/apis/"+bookinfo.cover} fallback={imgFallback} />
                    <div className={style["bookmsg"]}>
                        <div className={style["bookdesbecri"]}>
                            <span>{bookinfo.name + ": "}</span> {bookinfo.description}
                        </div>
                        <p className={style["labelbox"]}>
                            <span>{bookinfo.grade}成新</span>
                            <span>快递自提</span>
                            <span>{bookinfo.address}</span>
                        </p>
                        <div className={style["pricebox"]}>
                            <span>￥{bookinfo.price}</span>
                            <span>￥{bookinfo["origin_price"]}</span>
                            <button onClick={()=>this.dist(bookinfo)}>-</button>
                            <span>{bookinfo.num}</span>
                            <button onClick={()=>this.add(bookinfo)}>+</button>
                        </div>
                    </div>
                </li>
            )
        })
        return (
            <div className={style["index-root"]}>
                {/* <div className={style["bookhed"]}>
                    <input type="checkbox" onChange={ (e) => this.change(e.target.checked) } checked={this.state.allChecked} className="isAllChecked" ></input>
                    <Avatar className={style["userhead"]} src={bookinfo.img} />
                    <div className={style["username-box"]}>
                        <p>{bookinfo.uname}</p>
                        <p>{bookinfo.signature?bookinfo.signature:"用户很懒，啥都没说！"}</p>
                    </div>
                    <p>学生认证</p>
                </div> */}
                <ul className={style["booklist-box"]}>{bItem}</ul>
            </div>
        )
    }
}

const mapStateToProps = (state)=>{
    return {carList:state.carList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        add:user=>{
            dispatch({type:"ADD",data:user})
        },
        dist:user=>{
            dispatch({type:"DIST",data:user})
        },
        check:user=>{
            dispatch({type:"CHECK",data:user})
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Bookinfo)